<template>
  <el-dialog
      title="批量照片"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="handleOffDialog"
      width="30%"
  >
    <div class="title flex-j-between">
      <div class="left flex-j-between">
        <el-upload
            size="mini"
            class="upload-demo"
            :action="picUrl"
            multiple
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
        >
          <el-button size="mini">添加</el-button>
        </el-upload>
        <el-button type="primary" size="mini"  @click="handleImport">导入图片</el-button>
      </div>
      <div class="right flex-j-between">
        <el-select
            v-model="selectType"
            filterable
            clearable
            size="mini"
            style="width: 80%"
        >
          <el-option
              v-for="item in typeList"
              :key="item.type"
              :label="item.name"
              :value="item.type"
          >
          </el-option>
        </el-select>
        <el-button size="mini" @click="handleDelete">清空</el-button>
      </div>
    </div>
    <el-table :data="tableData"
              border
              height="280px"
              :header-cell-style="{ background: '#cae8ea', color: '#333' }"
              style="width:100%;margin-top: 20px">
      <el-table-column  v-for='(item,i) in tableTitle' :key="i" :prop="item.label" :label="item.name"
                        :width="i === 0?'241':'147'"
                        show-overflow-tooltip />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleOffDialog">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {postAction} from "@/api/manage";
import {baseStaff} from "@/api/apiUrl";

export default {
  name: 'ImportPhoto',
  components: {},
  data() {
    return {
      dialogVisible: false,
      picUrl:  window.serverUrl.url + baseStaff.upload,
      selectType: '',
      typeList: [
        {name:'姓名', type: 0},
        {name:'身份证', type: 1},
        {name:'姓名_身份证', type: 2},
      ],
      tableTitle: [
        {name: '文件名', label: 'name'},
        {name: '大小', label: 'size'},
        {name: '类型', label: 'type'},
      ],
      tableData: [],
    }
  },
  mounted() {},
  methods: {
    handleOpenDialog() {
      console.log('打开')
      this.dialogVisible = true
    },
    handleOffDialog() {
      console.log('关闭')
      this.dialogVisible = false
      this.tableData = []
      this.$emit('handleOffDialog')
    },
    /**
     * 图片导入
     */
    beforeAvatarUpload (file) {
      if (!/\.(png|jpg|gif|jpeg|webp)$/.test(file.name)) {
        this.$message({
          type: "warning",
          message: "上传文件只能为图片",
        });
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2.5
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2.5MB!')
      }
      return isLt2M
    },
    /**
     * 清空
     */
    handleDelete() {
      this.tableData = []
    },
    /**
     * 导入图片
     */
    handleImport() {
      postAction().then(res=> {

      })
    },
    //上传成功
    handleAvatarSuccess (res, file) {
      const item = {
        name: file.name,
        size: Math.round((file.size / 1024 / 1024)*100)/100 + 'MB',
        type: file.raw.type,
        url: window.serverUrl.url + res.data
      }
      this.tableData.push(item)
    },
  }
}
</script>

<style lang="less" scoped>
/*/deep/ .el-cascader .el-input .el-input__inner {*/
/*  height: 40px !important;*/
/*  line-height: 40px !important;*/
/*}*/

/deep/ .el-dialog__body {
  height: 400px !important;
  overflow-y: auto;
}
.flex-j-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  .left {
    width: 148px;
  }
  .right {
    width: 180px;
  }
}
::v-deep .el-input--mini .el-input__inner {
  width: 120px;
}
.warning-title{
  color: #ff0000;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
